<template>
  <div class="setting">
    <van-nav-bar
      title="设置"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <van-form @submit="onSubmit" class="form">
      <div class="cell flex align-center justify-between upload-wrapper">
        <van-field class="input" name="avatar">
          <template #input>
            <img class="avatar" :src="userInfo.avatar" alt="" />
          </template>
        </van-field>
        <span class="text">修改头像</span>
        <van-icon name="arrow" />
        <input type="file" class="upload" @change="fileChange" />
      </div>
      <div class="cell flex align-center justify-between">
        <span class="f-14">昵称</span>
        <van-field
          class="input"
          v-model="userInfo.nickName"
          clearable
          :error="false"
          name="nickName"
          label=""
          placeholder="输入昵称"
          :rules="[{ required: true, message: '请输入昵称' }]"
        />
      </div>
      <NuxtLink to="/login/forgetPassword">
        <div class="cell flex align-center justify-between">
          <span class="f-14">修改密码</span>
          <van-icon name="arrow" />
        </div>
      </NuxtLink>
      <van-button
        size="small"
        class="modify-btn"
        round
        block
        ative-type="submit"
      >
        修改
      </van-button>
    </van-form>
  </div>
</template>

<script>
export default {
  auth: true,
  // async fetch() {
  //   const res = await this.$axios.get("/v1/user/getUserInfo");
  //   if (res && res.data.code == 200) {
  //     this.userInfo = res.data.result;
  //   }
  // },
  data() {
    return {
      userInfo: {},
    };
  },
  methods: {
    //文件上传
    async fileChange(event) {
      const file = event.target.files[0];
      console.log("file", file);
      const formdata = new FormData();
      formdata.append("file", file);
      const res = await this.$axios.post("/v1/common/upload", formdata);
      if (res && res.data.code == 200) {
        this.userInfo.avatar = res.data.result.url;
      }
    },
    onSubmit(values) {
      this.$axios.put("/v1/user/modifyUserInfo", this.userInfo).then((res) => {
        if (res && res.data.code == 200) {
          this.$toast.success("修改成功");
          this.$cookies.set("userInfo",res.data.result)
        }
      });
    },
  },
  created(){
    this.userInfo=this.$cookies.get("userInfo")
  }
};
</script>

<style lang="scss" scoped>
.setting ::v-deep .van-field__control {
  text-align: right;
}
.setting ::v-deep .van-field__error-message {
  text-align: right;
}
.setting {
  min-height: 667px;
  position: relative;
  .form {
  }
  .input {
    width: 200px;
    padding: 0;
  }
  .cell {
    padding: 10px 0;
    margin: 0 16px;
    border-bottom: 1px solid #eee;
  }
  .text {
    margin-left: auto;
    margin-right: 5px;
    font-size: 14px;
  }
  .upload-wrapper {
    position: relative;
  }
  .upload {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
  }
  .avatar {
    height: 50px;
    width: 50px;
    border-radius: 50%;
  }
  .modify-btn {
    position: absolute;
    left: 10px;
    width: 355px;
    right: 10px;
    bottom: 40px;
    height: 32px;
    font-size: 14px;
    margin-top: 20px;
    color: #f55555;
    border-color: #f55555;
    background: #fff;
  }
}
</style>